<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <button @click="add">+</button> -->
    <div id="app">
        <child :num="n" @addnum="add"></child>



    </div>
    
</body>
<script>

    new Vue({
        el:"#app",
        data:{
            n:100,

        },
        methods:{
            add(){
                this.num++
            }

        },
        components:{
            "child":{
                props:["num"],
                template:`<div>子组件<h3>父组件给子组件传的数据{{num}}</h3><button @click="add">+</button></div>`,
                methods:{
                    add(){
                        this.$emit("addnum")

                    }


                }

            }

        }

    })
</script>
</html>